<template>
  <div :style="Style">
    <div style="height:100%;width:100%;" :style="Style">
      <slot />
    </div>
    <transition name="kk" mode="out-in">
      <div :style="Bg+Box.join('')" v-if="load!=undefined&&load!==false">
        <div :style="Center+Box[0]" style="height:1.3vw;width:1.3vw;">
          <div class="kk-block kk-block-a" :style="Block+Box[0]" />
          <div class="kk-block kk-block-b" :style="Block+Box[0]" />
          <div class="kk-block kk-block-c" :style="Block+Box[0]" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "kk-relative",

  // 接收参数
  props: {
    color: null, // 加载框颜色主题
    load: null // 控制加载遮罩层
  },

  // 页面对象
  data: () => ({
    Block:
      "background-color:rgb(64,158,255);height:0.6vw;width:0.6vw;border-radius:0.1vw;",
    Style: "position:relative;box-sizing:border-box;font-size:0vw;", // 通用样式
    Center: "top:50%;left:50%;transform:translate(-50%,-50%);",
    Bg: "", // 背景颜色

    /* ------------------------------- 分割线 ------------------------------- */

    Box: [
      "position:absolute;box-sizing:border-box;font-size:0vw;",
      "bottom:0;right:0;left:0;top:0;",
      "cursor:wait"
    ] // 通用样式
  }),

  // 生命周期函数：挂载前调用
  created() {
    if (this.color == "dark") {
      this.Bg = "background-color:rgba(48,49,51,0.8);";
    } else {
      this.Bg = "background-color:rgba(255,255,255,0.8);";
    }
  }
};
</script>

<style scoped>
.kk-enter,
.kk-leave-to {
  opacity: 0;
}

.kk-enter-active,
.kk-leave-active {
  transition: opacity 0.25s linear;
}

.kk-block {
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-delay: 0s;
}

.kk-block-a {
  animation-name: kk-block-d;
}

.kk-block-b {
  animation-name: kk-block-e;
}

.kk-block-c {
  animation-name: kk-block-f;
}

@keyframes kk-block-d {
  0% {
    left: 0vw;
    top: 0vw;
  }
  25% {
    left: 0.7vw;
    top: 0vw;
  }
  50% {
    left: 0.7vw;
    top: 0vw;
  }
  70% {
    left: 0.7vw;
    top: 0vw;
  }
  100% {
    left: 0.7vw;
    top: 0.7vw;
  }
}

@keyframes kk-block-e {
  0% {
    left: 0vw;
    top: 0.7vw;
  }
  25% {
    left: 0vw;
    top: 0.7vw;
  }
  50% {
    left: 0vw;
    top: 0vw;
  }
  70% {
    left: 0vw;
    top: 0vw;
  }
  100% {
    left: 0vw;
    top: 0vw;
  }
}

@keyframes kk-block-f {
  0% {
    left: 0.7vw;
    top: 0.7vw;
  }
  25% {
    left: 0.7vw;
    top: 0.7vw;
  }
  50% {
    left: 0.7vw;
    top: 0.7vw;
  }
  70% {
    left: 0vw;
    top: 0.7vw;
  }
  100% {
    left: 0vw;
    top: 0.7vw;
  }
}
</style>